<template>
	<view class="boxBg">
		<swiper class="swiperBox"
		:indicator-dots="setting.indicatorDots"
		:indicator-color="setting.indicatorColor"
		:indicator-active-color="setting.indicatorActiveColor"
		:circular="setting.circular"
		:autoplay="setting.autoplay"
		:interval="setting.interval"
		:duration="setting.duration"
		previous-margin="90rpx"
		next-margin="90rpx"
		display-multiple-items="1"
		@change="swiperChange">
		    <swiper-item v-for="(item, index) in swiperList" :key="index" class="swiperItem">
				<view class="itemBox border_r24" :class="curSwiper === index?'zoom-in':'zoom-out'" :style="{background:item.color}">
					<image class="itemImg border_r24" :src="item[setting.imgKey]" mode="aspectFill"></image>
				</view>
		    </swiper-item>
		  </swiper>
	</view>
</template>

<script>
	export default {
		name:"fr-zoom-swiper",
		props: {
			swiperList: {
				type: Array,
				default: []
			},
			setting: {
				type: Object,
				default: function() {
					return {
						indicatorDots: true,
						indicatorColor: '#DDDDDD',
						indicatorActiveColor: '#555555',
						circular: true,
						autoplay: true,
						interval: 3000,
						duration: 1000,
						imgKey: 'url',
						idkey: 'id',
					}
				}
			},
		},
		data() {
			return {
				curSwiper: 0,
			};
		},
		methods: {
			swiperChange(e) {
				this.curSwiper = e.detail.current
			},
		},
	}
</script>

<style lang="scss" scoped>
.boxBg {
	.itemBox {
	  width: 100%;
	  height: 100%;
	}
	.itemImg {
		width: 100%;
		height: 100%;
		display: block;
	}
	.zoom-out {
	  transform: scale(0.8);
	  transition: all 0.85s ease-out 0s;
	}
	.zoom-in {
	  transform: scale(1);
	  transition: all 0.85s ease-in 0s;
	}
}
</style>
